<template>
  <!-- 未评价页面 -->
  <div>
    <div class="box111">
      <ul class="myul">
        <li><van-icon name="arrow-left" /></li>
        <li>快递单评价</li>
        <li @click="hangclick">提交</li>
      </ul>
    </div>
    <ul class="app">
      <li>总体评分</li>
      <li>8分</li>
      <li>
        <van-rate
          gutter="35px"
          :size="40"
          v-model="value"
          icon="like"
          void-icon="like-o"
        />
      </li>
    </ul>
    <h3>店铺评分</h3>
    <ul class="app-3">
      <li>
        <span>店铺评分</span>
        <van-rate
          v-model="value1"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
      </li>
      <li>
        <span>物流速度</span>
        <van-rate
          v-model="value2"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
      </li>
      <li>
        <span>快递评分</span>
        <van-rate
          v-model="value3"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
      </li>
    </ul>
    <input
      class="get"
      type="textarea"
      placeholder="此用户没有填写评价"
      v-model="val"
    />
    <van-uploader v-model="fileList" multiple />
  </div>
</template>

<script>
import { starputData } from "../request/api";
export default {
  data() {
    return {
      value: 4,
      value1: 5,
      value2: 3,
      value3: 2,
      fileList: [
        { url: "https://img01.yzcdn.cn/vant/leaf.jpg" },
      ],
      id: this.$route.query.id,
      orderCode: this.$route.query.orderCode,
      val:''
    };
  },
  //shop	number	true	普通参数		店铺评分
  // logistics	number	true	普通参数		物流速度
  // express	number	true	普通参数		快递评分
  // totalScore	number	true	普通参数		总分
  // orderCode	string	true	普通参数		订单编号
  // id	string	true	普通参数		订单id
  // info	string	true	普通参数		评价信息
  methods: {
    hangclick() {
      console.log(this.val);
      starputData({
        id: this.id,
        orderCode: this.orderCode,
        shop: this.value,
        logistics: this.value1,
        express: this.value2,
        totalScore: this.value3,
        info: this.val,
      }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.box111 {
  height: 60px;
  background-color: blue;
  line-height: 60px;
  .myul {
    display: flex;
    justify-content: space-around;
    img {
      width: 25px;
      height: 25px;
      margin-top: 15px;
    }
  }
}
.app {
  text-align: center;
  border-bottom: 1px solid #ccc;
  li {
    line-height: 40px;
    font-size: 20px;
  }
}
h3 {
  margin-left: 20px;
  color: #0f0f0f;
}
.app-3 {
  li {
    margin: 0 50px;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
  }
}
.get {
  margin-top: 20px;
  width: 405px;
  height: 200px;
  border: none;
}
</style>